<template>
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <CustomNavbar />
    <view>
      <uni-calendar
        :date="queryParams.date"
        :insert="true"
        :lunar="true"
        :start-date="'2009-5-20'"
        :end-date="'2139-5-20'"
        :show-month="false"
        @monthSwitch="monthSwitch"
        @change="calendarChange"
        :selected="haveTodoDateList"
      />
    </view>
    <view v-for="(item, index) in todoList" :key="index">
      <!--任务-->
      <FollowTaskCard v-if="item?.type === '1'" :item="item" />
      <!--线下会议-->
      <MeetingCard v-if="item?.type === '10'" :item="item" />
    </view>
    <view
      v-if="isLoading || todoList.length === 0"
      style="
        padding-top: 180rpx;
        background-color: #ffffff;
        margin: 28rpx;
        height: 400rpx;
        border-radius: 15rpx;
      "
    >
      <u-loadmore v-if="isLoading" status="loading" />
      <u-loadmore v-if="!isLoading && todoList.length === 0" status="nomore" />
    </view>
    <view
      @click="openAdd"
      style="
        position: fixed;
        width: 80rpx;
        height: 80rpx;
        background-color: rgba(55, 117, 203, 0.47);
        bottom: 350rpx;
        right: 0;
        border-radius: 50rpx 0 0 50rpx;
        padding: 12rpx 15rpx;
      "
    >
      <u-icon name="plus-circle" color="#3775cb" size="30"></u-icon>
    </view>
    <u-picker
      :show="popupShow"
      @cancel="popupShow = false"
      @confirm="confirmAdd"
      :columns="[['新增跟进任务', '新增线下会议']]"
    ></u-picker>
  </view>
</template>
<script setup lang="ts">
import { getTodoDateListAPI, getTodoListAPI } from '@/services/home'
import {onLoad, onShow} from '@dcloudio/uni-app'
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import FollowTaskCard from '@/pages/index/components/FollowTaskCard.vue'
import MeetingCard from '@/pages/index/components/MeetingCard.vue'
import {getFollowRecordListAPI} from "@/services/followRecord";
// 弹出层组件
const popupShow = ref<boolean>(false)

const queryParams = ref<any>({
  date: undefined
})
//有任务的日期
const haveTodoDateList = ref<any[]>([])
const todoList = ref<any[]>([])
const getTodoData = async () => {
  todoList.value = []
  const res = await getTodoListAPI(queryParams.value)
  todoList.value = res.data
}
const openAdd = async () => {
  popupShow.value = true
}

const confirmAdd = async (e: any) => {
  if (e.indexs[0] === 0) {
    //跟进任务
    uni.navigateTo({
      url: '/pagesTodo/followTask/followTaskForm',
    })
  } else if (e.indexs[0] === 1) {
    //线下会议
    uni.navigateTo({
      url: '/pagesTodo/meeting/meetingForm',
    })
  }
  popupShow.value = false
}

const monthSwitch = async (e) => {
  const month = String(e.month).padStart(2, '0')
  const res = await getTodoDateListAPI({
    date: e.year + '-' + month,
  })
  haveTodoDateList.value = res.data
}

const calendarChange = async (e) => {
  queryParams.value.date = e.fulldate
  isLoading.value = true
  await Promise.all([getTodoData()])
  isLoading.value = false
}

// 是否加载中标记
const isLoading = ref(false)

// 页面加载
onShow(async () => {
  intiData()
})


const intiData = async () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  monthSwitch({
    month: month,
    year: year,
  })
  queryParams.value.date = year + '-' + month + '-' + day
  isLoading.value = true
  await Promise.all([getTodoData()])
  isLoading.value = false
}

// 暴露
defineExpose({
  intiData,
})

</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}

.viewport {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: auto;
  padding-bottom: 100rpx;
  .icons-text {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 10rpx;
    color: #666;

    .icons {
      color: #3775cb;
      padding: 6rpx 5rpx 7rpx 0;
      .image {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }
  .card-title {
    font-size: 28rpx;
  }
  .card-body {
    padding-left: 18rpx;
  }
}
</style>
